<template>
  <div :class="['ad_button',typeStyle === 'buttonTop'? 'button_top': '']">
    <div v-if="typeStyle === 'button_3'" class="ad_img ad_button_position" :style="'height:'+ attr.height + 'px;'">
      <img :src="attr.base64Src || require('@/assets/default.jpg')">
    </div>
    <el-button
      v-else
      :class="[typeStyle === 'button' ? 'button' : 'button_2']"
      type="primary"
      :style="'background:' + attr.button_background +
        ';border-color:' + attr.button_border_background +
        ';border-width:' + attr.button_border_width + 'px' +
        ';font-size:' + attr.font_size_button + 'px'+
        ';color:' + attr.color_button +
        ';font-weight:' + attr.font_weight_button +
        ';letter-spacing:' + attr.letter_spacing_button + 'px' +
        ';width:' + attr.button_width + '%' +
        ';border-radius:' + attr.button_border_radius + 'px' +
        ';height:' + attr.button_height + 'px'"
    >{{attr.button_text}}</el-button>
  </div>
</template>

<script>
import Vue from 'vue'
import { Button } from 'element-ui'
Vue.use(Button)
export default {
  name: 'Button',
  props: {
    typeStyle: {
      type: String,
      default: 'button'
    },
    typeSeat: {
      type: String,
      default: ''
    },
    attr: {
      type: Object,
      default: Object
    }
  },
  data() {
    return {}
  },
  mounted() {
    console.log(this.typeStyle)
    console.log(this.typeSeat)
  },
  methods: {}
}
</script>

<style scoped lang="scss">
    .ad_button {
        width: 100%;
        margin: 0 auto;
        text-align: center;
        .button {
            width: 160px;
            border-radius: 20px;
        }
        .button_2 {
            width: 90%;
            border-radius: 4px;
        }
       .ad_img {
        width: 100%;
        position: relative;
        height: 210px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .button_top {
      z-index: 99;
    }
    .button_bottom {
      position: absolute;
      bottom: 0;
      z-index: 99;
    }
</style>
